<template>
    <!-- Ctrl + / -->
    <!-- div.scale-box + tab -->
    <div class="scale-box" :style="styleObject">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
// import { transform } from 'typescript';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import debounce from 'lodash.debounce'
let { width, height } = defineProps({
    // 浏览器可视区域的宽高
    width: {
        type: Number,
        default: document.documentElement.clientWidth
    },
    height: {
        type: Number,
        default: document.documentElement.clientHeight
    }
})


// style_object = {} # python
// StyleObject  styleObject = new StyleObject() // Java
let sacle = ref(1) // 页面的缩放比例
let getSacle = () => {
    let ww = window.innerWidth / width
    let wh = window.innerHeight / height

    return ww < wh ? ww : wh
}
let setScale = debounce(() => {
    sacle.value = getSacle()
}, 500) // 每隔500ms 设置一次宽高比

let styleObject = computed(() => {
    console.log('宽度', width + 'px')
    return {
        transform: `scale(${sacle.value}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${sacle.value}) translate(-50%, -50%)`,
        width: width + 'px',
        height: height + 'px'
    }
})

sacle.value = getSacle()
onMounted(() => {
    getSacle(); // 尝试获取屏幕比例

    // 当窗口发生改变的时候
    window.onresize = setScale
    window.addEventListener('resize', setScale)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', setScale)
})
</script>

<style scoped lang="scss">
.scale-box {
    transform-origin: 0 0;
    position: absolute;
    // 离开左边50%
    left: 50%;
    // 离开右边50%
    top: 50%;
    transition: all 0.3s;
    // 一开始就默认是垂直水平居中
    transform: translate(-50%, -50%);
    // background-color: aqua;
}
</style>